<template>
  <div class="weibo">
      <div class="now_header">
          <div style="width: 28px;display: inline-block" @click = goHome>
              <img style="width: 100%" src="../assets/img/homepage.png">
          </div>
          <div style="width: 28px;display: inline-block;float: right" @click = goAddWeibo>
              <img style="width: 100%" src="../assets/img/plus2.png">
          </div>
      </div>
      <van-pull-refresh v-model="common.refresh" @refresh="onRefresh" >
      <div style="margin-top:  50px" class="show-box" v-infinite-scroll="moreWBData"  :infinite-scroll-immediate =false>
          <div style="height: 100px" v-show="wbData.records.length == 0"></div>

          <weibo-info  :bottom-show = "'wblist'"   :weibo-records = "wbData.records" :user-id = "common.userId"  @show-more = "showMoreInfo"></weibo-info>

      </div>
      </van-pull-refresh>
      <Popup v-model:show="show" position="bottom" round
             :style="{ height: '10%' , paddingTop : '20px', paddingLeft:'24px'}">
            <div style="color: #e64a2a; text-align: left;line-height: 30px" @click="deleteWb">
                <Icon name="delete-o"  style="vertical-align:middle" size="30"/>
                <p style="letter-spacing: 10px;display: inline-block; margin-left: 20px">删除</p>
            </div>
      </Popup>
  </div>
</template>

<script setup>
import {get_user} from  "@/axios/login";
import {get_wb,delete_wb} from  "@/axios/weibo";
import { onMounted, reactive,ref} from "vue";
import {useRouter} from 'vue-router'
import {whole_init} from  "@/util/Permission"
import WeiboInfo from "@/components/weiboInfo.vue";
import { Popup , Cell, Icon} from 'vant';


const show = ref(false);


const router = useRouter();

const  goHome =() =>{
    router.push("/")
}
const  goAddWeibo =() =>{
    router.push("/addWeibo")
}
const common = reactive({
    userId:"",
    size: 10,
    current:1,
    pages:0,
    refresh:false,
    deleteId:String
})
const onRefresh = () => {
    get_wb({"size":common.size}).then(res=>{
        wbData.records =  res.data.data.records
        common.pages = res.data.data.pages
        common.current = res.data.data.current
        common.refresh = false
    }).catch(err=>{
        common.refresh = false
    })
};

const deleteWb = ()=>{
    delete_wb({"id" : common.deleteId}).then(res=>{
        show.value= false
        onRefresh()
    })
}

const wbData =  reactive({
    records:[]
})

const moreWBData = ()=>{
    if(common.current >= common.pages ){
        return
    }
    get_wb({"current": common.current + 1, "size":common.size}).then(res=>{
        wbData.records = wbData.records.concat(res.data.data.records)
        common.current = res.data.data.current
    }).catch(err=>{

    })
}

const showMoreInfo = (wbId) =>{
    show.value= true
    common.deleteId = wbId
}


onMounted(() => {
    get_user().then(res=>{
        common.userId = res.data.data.userId
        if(!whole_init(res.data.data.authorities).wb){
            router.push("/")
        }else {
            get_wb({"size":common.size}).then(res=>{
                wbData.records =  res.data.data.records
                common.pages = res.data.data.pages
                common.current = res.data.data.current
            }).catch(err=>{

            })
        }
    }).catch(err=>{

    })


})

</script>

<style scoped>
.now_header{
    position: fixed;
    width: 100%;
    z-index: 100;
    background-color: #5195FF;
    color:white;
    text-align: left;
    top: 0;
    left: 0;
    padding: 4px;
    box-sizing:border-box;
}
</style>